<template>
<div>新增两个钩子 官方说是用来调试使用的
<div>{{data}}</div>
  <button @click="fn()">点击</button>
</div>
</template>

<script lang="ts">
import {onRenderTracked, onRenderTriggered, ref} from 'vue'
export default {
  name: "add-hook",
  setup(){
    let data=ref<boolean>(true)
// 这是状态触发，就是你点击或者是那个数据变化，就会打印出来，只有当前触发的，会将新的value值和旧的value都打印
    // 相比下面的钩子函数，这个更精准一些
    onRenderTriggered((e)=>{
      console.log(e);
    })
    // 状态跟踪钩子函数，只要页面上的数据发生改变就会进行触发 组件更新触发
    onRenderTracked((event)=>{
      console.log(event);
    });
    const fn=()=>{
      data.value=!data.value
    }
    return{
      data,
      fn
    }
  }
}
</script>

<style scoped>

</style>
